<template>
  <div class="editor" @dragover="onEditorDragOver" @drop="onEditorDrop">
    <div class="editor-content">
      <sized-box v-model="size">
        <div id="container"></div>
      </sized-box>
    </div>
  </div>
</template>

<script>
import { Graph, Shape } from "@antv/x6";
import { set, cloneDeep } from "lodash";

export default {
  name: "GraphEditor",
  props: {
    mode: {
      type: String,
      default: "edit"
    }
  },
  data() {
    return {
      graph: null,
      size: {}
    };
  },
  watch: {
    size(val) {
      this.graph.resize(val.width, val.height);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      let vm = this;
      // 初始化画布
      let graph = new Graph({
        container: document.getElementById("container"),
        grid: true,
        snapline: {
          enabled: true
          // sharp: true,
        },
        scroller: {
          enabled: true,
          pageVisible: true,
          pageBreak: true,
          pannable: true
        }
      });
      vm.graph = graph;
    },
    // 拖拽时悬浮在editor上
    onEditorDragOver(e) {
      e.preventDefault();
    },
    // 拖拽放置
    onEditorDrop(e) {
      e.preventDefault();
      this.onWidgetDrag(e);
    },
    // 组件拖拽
    async onWidgetDrag(e) {
      let options = {};
      let dragNode = this.createNode(this.graph, options);
      let position = this.graph.pageToLocal(e.pageX, e.pageY);
      dragNode.position(position.x, position.y);
      this.graph.addNode(dragNode);
    },
    createNode(graph, options) {
      const rect = new Shape.Rect({
        width: 80,
        height: 40,
        angle: 30,
        attrs: {
          body: {
            fill: "blue"
          },
          label: {
            text: "Hello",
            fill: "white"
          }
        }
      });
      return rect;
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  cursor: move;
  position: relative;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.editor {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .editor-content {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
}
</style>

<style lang="less">
@keyframes ant-line {
  to {
    stroke-dashoffset: -1000;
  }
}
.editor {
  .custom-foreign-object {
    background-color: #ffffff;

    .custom-fo-content {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  .x6-node [magnet="true"] {
    transition: none;
  }

  .x6-edge-label {
    .labelFo {
      width: 26px;
      height: 14px;
      transform: translateY(-8px);
    }

    .labelBody {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .labelContent {
      width: 100%;
      height: 100%;
      text-align: center;
    }

    .labelButton {
      cursor: pointer;
      width: 26px;
      height: 14px;
      padding: 0;
      margin: 0;
      font-size: 12px;
      border: none;
      outline: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
    }
  }
}
</style>
